import { Component, ViewChild, ElementRef } from '@angular/core';
import { Slides } from 'ionic-angular';
import { NavController } from 'ionic-angular';
import { SettingsPage } from '../settings/settings';
import { MainTab } from '../main-tab';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Slides) slides: Slides;
  @ViewChild('headBgColor') greetBgDiv: ElementRef;
  @ViewChild('lyScroll') lyScrollDiv: ElementRef;
  @ViewChild('btnBackTop') bBackTop: ElementRef;

  public headerSlideData = [];

  private headerChangeColor() {
    //https://segmentfault.com/a/1190000008653690
    let headdiv = this.lyScrollDiv.nativeElement;
    var nowOpacity = 0;
    let lHeadBgdiv= this.greetBgDiv.nativeElement;
    headdiv.onscroll = function (event) {
      if (this.scrollTop / 250 < .85) {
        nowOpacity = this.scrollTop / 250;
      }
      lHeadBgdiv.style.opacity = nowOpacity;

    }
  }

  private getHeaderSlideData() {
    return [
      {
        alt: "双十一预热主场会",
        src: "assets/img/home-headerSlide-1.jpg"
      },
      {
        alt: "11月11天家电低价不停歇",
        src: "assets/img/home-headerSlide-2.jpg"
      },
      {
        alt: "家具盛典 好货提前抢",
        src: "assets/img/home-headerSlide-3.jpg"
      },
      {
        alt: "IT抢券节",
        src: "assets/img/home-headerSlide-4.jpg"
      },
      {
        alt: "潮流数码 双11爽购攻略",
        src: "assets/img/home-headerSlide-5.jpg"
      }
    ];
  }

  private goTop() {
    let lyBg = this.lyScrollDiv.nativeElement;
    let btTop = this.bBackTop.nativeElement;

    lyBg.addEventListener('scroll', () => {
      let top = lyBg.scrollTop;
      // console.log(top);
      if ( top > 500) {
        btTop.style.opacity = 1;
      } else {
        btTop.style.opacity = 0;
      }
    }, false);

    btTop.onclick = function() {
      lyBg.scrollTop = 0;
    };
  }

  startPage(page: string) {
    this.navCtrl.parent.select(4);
    console.log(this.navCtrl.parent);
  }

  ionViewDidLoad() {
    this.headerSlideData = this.getHeaderSlideData();
    this.goTop();
    this.headerChangeColor();
  }

  goToSlide() {
    this.slides.slideTo(2, 500);
  }

  constructor(
    public navCtrl: NavController) {
      // console.log( this.navCtrl );
  }
}
